<template>
    <div class="login">
        <div class="login-box">
            <el-form ref="form" label-width="80px" size="medium" label-position="left">
                <el-form-item label="主机地址">
                    <el-input v-model="formData.host" placeholder="主机ip,默认 127.0.0.1"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model="formData.port" placeholder="默认6379" :rules="[
                        { type: 'number', message: '端口必须为数字'}
                    ]"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formData.pass" placeholder="如果没有设置密码请留空"></el-input>
                </el-form-item>
                <el-form-item label="库数量">
                    <el-input v-model="formData.num" placeholder="默认16" :rules="[
                        { type: 'number', message: '库数量必须为数字'}
                    ]"></el-input>
                </el-form-item>
            </el-form>
            <el-button size="medium" icon="el-icon-lollipop" :loading="loading" type="success" @click="onSubmit">连接</el-button>
        </div>
    </div>
</template>

<script>
// import {
//     ElMessage
// } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { login } from '@/api/key';
import { defineComponent, reactive, toRefs} from 'vue';
export default defineComponent({
    name: "Login",
    props: {},
    setup() {
        const state = reactive({
            formData: {
                // host: "127.0.0.1",
                host: "192.168.90.99",
                pass: '1211',
                port: '',
                num: ''
            },
            loading: false
        });
        return toRefs(state)
    },
    computed: {},
    created() { },
    watch: {},
    mounted() { },
    methods: {
        onSubmit() {
            this.loading = true
            login(this.formData).then((res) => {
                if (res.code == 200) {
                    this.$router.push({ path: '/home' })
                } else {
                    ElMessage(res.msg)
                }
            }).finally(() => {
                this.loading = false
            })
        }
    },
})
</script>

<style scoped>
.login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: url('http://www.dmoe.cc/random.php');
}
.login-box {
    width: 400px;
    padding: 40px 30px 30px;
    border-radius: 16px;
    background-color: white;
}
</style>